<template>
  <lew-flex x="start">
    <div>
      <lew-flex direction="y" x="start" gap="10px">
        <lew-flex y="end" x="start">
          <lew-button type="fill" color="red">
            red
          </lew-button>
          <lew-button type="fill" color="orange">
            orange
          </lew-button>
          <lew-button type="fill" color="yellow">
            yellow
          </lew-button>
          <lew-button type="fill" color="green">
            green
          </lew-button>
          <lew-button type="fill" color="mint">
            mint
          </lew-button>
          <lew-button type="fill" color="teal">
            teal
          </lew-button>
          <lew-button type="fill" color="cyan">
            cyan
          </lew-button>
          <lew-button type="fill" color="blue">
            blue
          </lew-button>
          <lew-button type="fill" color="indigo">
            indigo
          </lew-button>
          <lew-button type="fill" color="purple">
            purple
          </lew-button>
          <lew-button type="fill" color="pink">
            pink
          </lew-button>
          <lew-button type="fill" color="brown">
            brown
          </lew-button>
          <lew-button type="fill" color="gray">
            gray
          </lew-button>
          <lew-button type="fill" color="black">
            black
          </lew-button>
        </lew-flex>
        <lew-flex y="end" x="start">
          <lew-button type="light" color="red">
            red
          </lew-button>
          <lew-button type="light" color="orange">
            orange
          </lew-button>
          <lew-button type="light" color="yellow">
            yellow
          </lew-button>
          <lew-button type="light" color="green">
            green
          </lew-button>
          <lew-button type="light" color="mint">
            mint
          </lew-button>
          <lew-button type="light" color="teal">
            teal
          </lew-button>
          <lew-button type="light" color="cyan">
            cyan
          </lew-button>
          <lew-button type="light" color="blue">
            blue
          </lew-button>
          <lew-button type="light" color="indigo">
            indigo
          </lew-button>
          <lew-button type="light" color="purple">
            purple
          </lew-button>
          <lew-button type="light" color="pink">
            pink
          </lew-button>
          <lew-button type="light" color="brown">
            brown
          </lew-button>
          <lew-button type="light" color="gray">
            gray
          </lew-button>
          <lew-button type="light" color="black">
            black
          </lew-button>
        </lew-flex>
        <lew-flex y="end" x="start">
          <lew-button type="ghost" color="red">
            red
          </lew-button>
          <lew-button type="ghost" color="orange">
            orange
          </lew-button>
          <lew-button type="ghost" color="yellow">
            yellow
          </lew-button>
          <lew-button type="ghost" color="green">
            green
          </lew-button>
          <lew-button type="ghost" color="mint">
            mint
          </lew-button>
          <lew-button type="ghost" color="teal">
            teal
          </lew-button>
          <lew-button type="ghost" color="cyan">
            cyan
          </lew-button>
          <lew-button type="ghost" color="blue">
            blue
          </lew-button>
          <lew-button type="ghost" color="indigo">
            indigo
          </lew-button>
          <lew-button type="ghost" color="purple">
            purple
          </lew-button>
          <lew-button type="ghost" color="pink">
            pink
          </lew-button>
          <lew-button type="ghost" color="brown">
            brown
          </lew-button>
          <lew-button type="ghost" color="gray">
            gray
          </lew-button>
          <lew-button type="ghost" color="black">
            black
          </lew-button>
        </lew-flex>
        <lew-flex y="end" x="start">
          <lew-button type="text" color="red">
            red
          </lew-button>
          <lew-button type="text" color="orange">
            orange
          </lew-button>
          <lew-button type="text" color="yellow">
            yellow
          </lew-button>
          <lew-button type="text" color="green">
            green
          </lew-button>
          <lew-button type="text" color="mint">
            mint
          </lew-button>
          <lew-button type="text" color="teal">
            teal
          </lew-button>
          <lew-button type="text" color="cyan">
            cyan
          </lew-button>
          <lew-button type="text" color="blue">
            blue
          </lew-button>
          <lew-button type="text" color="indigo">
            indigo
          </lew-button>
          <lew-button type="text" color="purple">
            purple
          </lew-button>
          <lew-button type="text" color="pink">
            pink
          </lew-button>
          <lew-button type="text" color="brown">
            brown
          </lew-button>
          <lew-button type="text" color="gray">
            gray
          </lew-button>
          <lew-button type="text" color="black">
            black
          </lew-button>
        </lew-flex>
      </lew-flex>
    </div>
  </lew-flex>
</template>
